<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Homework 3</title>
    <style>
      /* style div and headers */
      div,
      h2 {
        text-align: center;
      }

      /* style of bar charts */
      .bar-chart-x rect {
        fill: rgb(241,151,186);
      }

      .bar-chart-y rect {
        fill: rgb(79,175,211);
      }

      .bar-chart .hovered {
        fill: #979696;
      }

      .scatter-plot .hovered {
        fill: #979696;
      }

      /* style of line charts */
      .line-chart {
        stroke: rgb(79,175,211);
        stroke-width: 2;
        fill: none;
      }

      .line-chart-x {
        stroke: rgb(241,151,186);
      }

      .line-chart-y {
        stroke: rgb(79,175,211);
      }

      text {
        fill: black;
      }

      /* style of area charts */
      .area-chart {
        fill: rgb(241,151,186);
      }

      .area-chart-x {
        stroke: #979696;
        stroke-width: 0.05;
        fill: rgb(241,151,186);
      }

      .area-chart-y {
        stroke: #979696;
        stroke-width: 0.05;
        fill: rgb(79,175,211);
      }

      /* style of scatter plot */
      .scatter-plot circle {
        fill: rgb(241,151,186);
      }

      /* style of scatter plot frame */
      .scatter-plot rect {
        fill: none;
      }

      .row {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }
    </style>
    <script src="script.js"></script>
  </head>

  <body>
    <h3>CS-5630 / CS-6630 Homework 3</h3>
    <address>
      <span>Kailing Fu<br></span>
      <span>u1327581@utah.edu<br></span>
      <span>u1327581<br></span>
    </address>
    <br />
    <hr />
    <br />

    <span>
      <button onclick="staircase()">Staircase </button>
    </span>

    <span>
      <label>Dataset:</label>
      <select id="dataset" onchange="changeData()">
        <option value="covid_us">The US</option>
        <option selected value="covid_utah">Utah</option>
        <option value="covid_ca">California</option>
        <option value="covid_ny">New York</option>
      </select>
    </span>

    <span> <input type="checkbox" id="random" onclick="changeData()" /> Random Subset </span>

    <br />

    <div class="row">
      <div>
        <h2>Bar Charts</h2>
        <div>
          <svg width="350" height="230">
            <g id="aBarChart-axis"></g>
            <g class="bar-chart bar-chart-x" id="aBarChart" transform="translate(345, 0)">
              <rect width="100" height="12" transform="translate(0, 0) scale(-1, 1)"/>
              <rect width="80" height="12" transform="translate(0, 14) scale(-1, 1)"/>
              <rect width="130" height="12" transform="translate(0, 28) scale(-1, 1)"/>
              <rect width="90" height="12" transform="translate(0, 42) scale(-1, 1)"/>
              <rect width="170" height="12" transform="translate(0, 56) scale(-1, 1)"/>
              <rect width="140" height="12" transform="translate(0, 70) scale(-1, 1)"/>
              <rect width="60" height="12" transform="translate(0, 84) scale(-1, 1)"/>
              <rect width="40" height="12" transform="translate(0, 98) scale(-1, 1)"/>
              <rect width="120" height="12" transform="translate(0, 112) scale(-1, 1)"/>
              <rect width="70" height="12" transform="translate(0, 126) scale(-1, 1)"/>
              <rect width="50" height="12" transform="translate(0, 140) scale(-1, 1)"/>
              <rect width="30" height="12" transform="translate(0, 154) scale(-1, 1)"/>
              <rect width="110" height="12" transform="translate(0, 168) scale(-1, 1)"/>
              <rect width="160" height="12" transform="translate(0, 182) scale(-1, 1)"/>
              <rect width="150" height="12" transform="translate(0, 196) scale(-1, 1)"/>
            </g>
          </svg>
          <svg width="350" height="230">
            <g id="bBarChart-axis"></g>
            <g class="bar-chart bar-chart-y" id="bBarChart" transform="translate(5, 0)"></g>
          </svg>
        </div>
      </div>

      <div>
        <h2>Line Charts</h2>
        <svg  id="line-chart-svg" width="600" height="320">
          <g id="aLineChart-axis"></g>
          <g class="line-chart line-chart-x" transform="translate(50,15)">
            <path id="aLineChart"/>
          </g>
          <g id="bLineChart-axis"></g>
          <g class="line-chart line-chart-y" transform="translate(50,15)">
            <path id="bLineChart"/>
          </g>
        </svg>
      </div>
    </div>

    <div class="row">
      <div>
        <h2>Area Charts</h2>
        <svg class="area-chart" width="300" height="300">
          <g id="aAreaChart-axis"></g>
          <g class="area-chart-x" transform="translate(295,0) rotate(90)">
            <path id="aAreaChart"/>
          </g>
        </svg>
        <svg class="area-chart " width="300" height="300">
          <g id="bAreaChart-axis"></g>
          <g class="area-chart-y" transform="translate(5, 0) rotate(90) scale(1,-1)">
            <path id="bAreaChart"/>
          </g>
        </svg>
      </div>

      <div>
        <h2>Scatterplot</h2>
        <svg class="scatter-plot" width="600" height="300">
          <g transform="translate(180, 10) " id="scatterplot">
            <g id="x-axis" transform="translate(0, 240)"></g>
            <g id="y-axis" transform="translate(0, 0)"></g>
          </g>
        </svg>
      </div>
    </div>
  </body>
</html>
